<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>

<%--代表HTML5--%>
<!DOCTYPE html>
<html>
<%--Header Begin--%>
<head>
    <title>MyShop | 登录</title>
    <jsp:include page="../includes/header.jsp"/>
    <link href="//unpkg.com/layui@2.9.7/dist/css/layui.css" rel="stylesheet">
</head>

<body class="skin-blue layout-top-nav" style="height: auto; min-height: 100%;">

<div class="wrapper" style="height: auto; min-height: 100%;">

    <jsp:include page="../includes/top_navigation_reception.jsp"/>

    <!-- Full Width Column -->
    <div class="content-wrapper" style="min-height: 471px;">
        <div class="container">
            <!-- Content Header (Page header) -->
            <section class="content-header">
                <br>
                <h1>
                    首页 | Show
                    <small>轮播展示</small>
                </h1>
                <ol class="breadcrumb">
                    <br>
                    <li><a href="/index"><i class="fa fa-dashboard"></i> 首页</a></li>
                    <li><a href="#">SHOW</a></li>
                </ol>

            </section>
            <hr>

            <%--内容开始--%>
            <!-- Main content -->
            <section class="content">
                <div id="myCarousel" class="carousel slide ">
                    <!-- 轮播（Carousel）指标 -->
                    <ol class="carousel-indicators">
                        <li data-target="#myCarousel" data-slide-to="0"
                            class="active"></li>
                        <li data-target="#myCarousel" data-slide-to="1"></li>
                        <li data-target="#myCarousel" data-slide-to="2"></li>
                    </ol>
                    <!-- 轮播（Carousel）项目 -->
                    <div class="carousel-inner">
                        <div class="item active">
                            <a href="${pageContext.request.contextPath}/view/content?tpVid=1">
                                <img style="height: 403px;width: 1110px"
                                     src="https://tr-osdcp.qunarzz.com/tr-osd-tr-space/img/9bbd854225d2b6eba2d7ddfaf4d05ff0.jpg_r_1024x683x95_035667c7.jpg"
                                     alt="First slide">

                                <div class="carousel-caption"><h1>七星岩</h1>
                                </div>
                            </a>
                        </div>
                        <div class="item">
                            <a href="${pageContext.request.contextPath}/hotel/content?hid=1">
                                <img style="height: 403px;width: 1110px"
                                     src="https://media-cdn.tripadvisor.com/media/photo-s/2b/96/21/06/restaurant.jpg"
                                     alt="Second slide">
                                <div class="carousel-caption"><h1>七星岩温德姆至尊酒店</h1>
                                </div>
                            </a>
                        </div>
                        <div class="item">
                            <a href="${pageContext.request.contextPath}/food/content?id=1">
                                <img style="height: 403px;width: 1110px"
                                     src="https://img2.baidu.com/it/u=1046865382,1992396784&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1710694800&t=11687119cddb7bd27dd5856515edb469"
                                     alt="Third slide">
                                <div class="carousel-caption"><h1>荷花酒家</h1>
                                </div>
                            </a>
                        </div>
                    </div>
                    <!-- 轮播（Carousel）导航 -->
                    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
                        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                        <span class="sr-only">Previous</span>
                    </a>
                    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
                        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                        <span class="sr-only">Next</span>
                    </a>
                </div>
            </section>
            <!-- /.content -->
            <br>
            <section class="content-header">
                <h1>
                    资讯|攻略
                    <small>概略一览</small>
                </h1>
                <br>
                <%--自定义内容--%>
                <div class="row">
                    <div class="layui-row">
                        <div style="margin-left: 10px" class="layui-col-md5">
                            <div class="grid-demo grid-demo-bg1">
                                <c:forEach items="${travelInfos}" var="forum">
                                    <div class="layui-panel" style="background-color: white;border-bottom: 1px solid white">
                                        <a href="/travel/info/content?id=${forum.id}">
                                            <div style="padding: 39px;">
                                                <text>📑${forum.title}</text>
                                                    <%--                                                <div style="display: flex; justify-content: flex-end;">--%>
                                                    <%--                                                    <span>${forum.createTime}</span>--%>
                                                    <%--                                                </div>--%>
                                            </div>
                                        </a>
                                    </div>
                                </c:forEach>
                            </div>
                        </div>
                        <div style="margin-left: 70px" class="layui-col-md6">
                            <div class="grid-demo">
                                <c:forEach items="${forums}" var="forum">
                                    <div class="layui-panel">
                                        <a href="/forum/content?tpFid=${forum.tpFid}">
                                            <div style="padding: 20px;display: flex">
                                                <c:choose>
                                                    <c:when test="${fn:contains(forum.tpTcontent, 'img')}">
                                                        <div class="outer-div" style="width: 90px">${forum.tpTImg}</div>
                                                    </c:when>
                                                    <c:otherwise>
                                                        <!-- Else情况下的处理 -->
                                                        🚞
                                                    </c:otherwise>
                                                </c:choose>
                                                <text style="margin-left: 20px">${forum.tpTitle}</text>
                                            </div>
                                        </a>
                                    </div>
                                </c:forEach>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
            <section class="content-header">
                <h1>
                    热门景点
                </h1>
                <br>
                <%--自定义内容--%>
                <div class="row">
                    <c:forEach items="${viewPoints}" var="viewPoint">
                        <%--自定义内容--%>
                        <div class="col-sm-6 col-md-4 col-lg-3 viewpages">
                            <div class="thumbnail" style="height: auto;">
                                <div class="layui-card">
                                    <div class="layui-card-body">

                                        <a href="${pageContext.request.contextPath}/view/content?tpVid=${viewPoint.tpVid}">
                                            <img style="width: 300px; height: 200px;" src="${viewPoint.tpVpic}"
                                                 alt="..."
                                                 class="img-rounded">
                                        </a>
                                        <div class="caption">
                                            <div class="container-fluid">
                                                <div class="row">
                                                    <div class="col-md-12">
                                                        <h4 style="padding-top: 10px">${fn:substring(viewPoint.tpTitle,0,30)}</h4>
                                                        <h5 style="padding-top: 10px">
                                                            [${viewPoint.tpVname}&nbsp;<small>| ${viewPoint.tpLocation}</small>
                                                            ]
                                                        </h5>
                                                        <h5 style="padding-top: 10px">等级✨: ${viewPoint.tpLevel}</h5>
                                                        <h5 style="padding-top: 10px">
                                                            开放时间⏱️: ${viewPoint.tpOpentime}</h5>
                                                        <h5 style="padding-top: 10px">类型🌈: ${viewPoint.tpVtype}</h5>
                                                        <h5 style="padding-top: 10px">
                                                            详细地址🏡:${fn:substring(viewPoint.tpZip,0,7)}${viewPoint.tpZip.length()>7?"..":''}</h5>
                                                        <h5 style="padding-top: 10px">电话📞: ${viewPoint.tpVphone}</h5>
                                                        <div class="form-group"
                                                             style="text-align: right;padding-top: 10px">
                                                            <a class="btn" style="color: #0b97c4"
                                                               href="${pageContext.request.contextPath}/view/content?tpVid=${viewPoint.tpVid}">查看更多
                                                                »</a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>


                            </div>
                        </div>
                    </c:forEach>
                </div>
            </section>
            <%--酒店--%>
            <section class="content-header">
                <h1>
                    热门酒店
                </h1>
                <br>
                <hr>
                <br>
                <%--自定义内容--%>
                <div class="row">
                    <c:forEach items="${hotels}" var="hotel">
                        <%--自定义内容--%>
                        <div class="col-sm-6 col-md-4 col-lg-3 viewpages">
                            <div class="thumbnail" style="height: auto;">
                                <div class="layui-card">
                                    <div class="layui-card-body">

                                        <a href="${pageContext.request.contextPath}/hotel/content?hid=${hotel.hid}">
                                            <img style="width: 300px; height: 200px;" src="${hotel.imgUrl}"
                                                 alt="..."
                                                 class="img-rounded">
                                        </a>
                                        <div class="caption">
                                            <div class="container-fluid">
                                                <div class="row">
                                                    <div class="col-md-12">
                                                        <h4 style="padding-top: 10px">${fn:substring(hotel.title,0,30)}</h4>
<%--                                                        <h5 style="padding-top: 10px">--%>
<%--                                                            [${hotel.title}&nbsp;<small>| ${hotel.zip}</small>--%>
<%--                                                            ]--%>
<%--                                                        </h5>--%>
                                                        <h5 style="padding-top: 10px">房屋类型✨：${hotel.houseType}</h5>
                                                        <h5 style="padding-top: 10px">
                                                            价格💴：￥${hotel.price}</h5>
                                                        <h5 style="padding-top: 10px">城市🏨：${hotel.local}</h5>
                                                        <h5 style="padding-top: 10px">
                                                            详细地址🏡:${fn:substring(hotel.zip,0,7)}${hotel.zip.length()>7?"..":''}</h5>
                                                        <h5 style="padding-top: 10px">床类型🌈：${hotel.bedType}</h5>
                                                        <div class="form-group"
                                                             style="text-align: right;padding-top: 10px">
                                                            <a class="btn" style="color: #0b97c4"
                                                               href="${pageContext.request.contextPath}/hotel/content?hid=${hotel.hid}">查看更多
                                                                »</a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>


                            </div>
                        </div>
                    </c:forEach>
                </div>
                <%--自定义内容--%>
<%--                <div class="row">--%>
<%--                    <c:forEach items="${hotels}" var="hotel">--%>
<%--                        <!-- ITEM -->--%>
<%--                        <div class="col-lg-1"></div>--%>
<%--                        <div class="col-sm-6 col-md-4 col-lg-5">--%>
<%--                            <div class="thumbnail" style="height: 450px;">--%>
<%--                                <a href="/hotel/content?hid=${hotel.hid}">--%>
<%--                                        &lt;%&ndash;<img src="${viewPoint.tpVpic}" alt="..." class="img-rounded">&ndash;%&gt;--%>
<%--                                    <img src="${hotel.imgUrl}" alt="...">--%>
<%--                                </a>--%>
<%--                                <div class="caption">--%>
<%--                                    <h3>${hotel.title}</h3>--%>
<%--                                    <ol>--%>
<%--                                        <li><p style="color: #ffa309">城市：${hotel.local}|房屋类型：${hotel.houseType}|床类型：${hotel.bedType}</p>--%>
<%--                                        </li>--%>
<%--                                        <li><p style="color: #0b93d5">价格：￥${hotel.price} | 详细地址：${hotel.zip}</p>--%>
<%--                                        </li>--%>
<%--                                    </ol>--%>
<%--                                </div>--%>
<%--                                <div class="form-group" style="text-align: right;">--%>
<%--                                    <a class="btn" style="color: #0b97c4"--%>
<%--                                       href="/hotel/content?hid=${hotel.hid}">查看详情»</a>--%>
<%--                                </div>--%>
<%--                            </div>--%>
<%--                        </div>--%>
<%--                        <!-- END / ITEM -->--%>
<%--                    </c:forEach>--%>
<%--                </div>--%>
            </section>
            <section class="content-header">
                <h1>
                    热门美食
                </h1>
                <br>
                <%--自定义内容--%>
                <div class="row">
                    <c:forEach items="${foods}" var="food">
                        <%--自定义内容--%>
                        <div class="col-sm-6 col-md-4 col-lg-3 viewpages">
                            <div class="thumbnail" style="height: auto;">
                                <div class="layui-card">
                                    <div class="layui-card-body">

                                        <a href="${pageContext.request.contextPath}/food/content?id=${food.id}">
                                            <img style="width: 300px; height: 200px;" src="${food.imgUrl}"
                                                 alt="..."
                                                 class="img-rounded">
                                        </a>
                                        <div class="caption">
                                            <div class="container-fluid">
                                                <div class="row">
                                                    <div class="col-md-12">
                                                        <h4 style="padding-top: 10px">${fn:substring(food.title,0,30)}</h4>
<%--                                                        <h5 style="padding-top: 10px">人气✨: ${food.heat}</h5>--%>
                                                        <h5 style="padding-top: 10px">
                                                            开放时间⏱️: <fmt:formatDate value="${food.mealTime}" pattern="yyyy-MM-dd HH:mm:ss" />
                                                        </h5>
                                                        <h5 style="padding-top: 10px">类型🌈: ${food.foodType}</h5>
                                                        <h5 style="padding-top: 10px">
                                                            详细地址🏡:${fn:substring(food.address,0,7)}${food.address.length()>7?"..":''}</h5>
                                                        <div class="form-group"
                                                             style="text-align: right;padding-top: 10px">
                                                            <a class="btn" style="color: #0b97c4"
                                                               href="${pageContext.request.contextPath}/food/content?id=${food.id}">查看更多
                                                                »</a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>


                            </div>
                        </div>
                    </c:forEach>
                </div>
            </section>

        </div>
        <!-- /.container -->
    </div>
    <!-- /.content-wrapper -->

    <%--版权--%>
    <jsp:include page="../includes/copyright.jsp"/>
</div>
<!-- ./wrapper -->
<%--js--%>
<jsp:include page="../includes/footer.jsp"/>
</body>
<style>
    .outer-div img {
        max-width: 100%;
        height: auto;
    }
</style>
</html>